<!-- components/CustomNavBarPlaceHolder.vue -->
<template>
	<view class="nav-bar-placeholder" :style="{ height: totalHeight + 'px' }">
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<view v-if="showNavBar" class="nav-bar" :style="{ height: navBarHeight + 'px' }">
			<view class="">
				{{title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CustomNavBarPlaceHolder',
		props: {
			showNavBar: {
				type: Boolean,
				default: true // 默认显示导航栏高度占位
			},
			customNavBarHeight: {
				type: Number,
				default: 44 // 导航栏高度，默认 44px
			},
			title: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				navBarHeight: this.customNavBarHeight,
				totalHeight: 0
			};
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				const systemInfo = uni.getSystemInfoSync();

				// 获取状态栏高度
				this.statusBarHeight = systemInfo.statusBarHeight;

				// 计算总高度：状态栏 + 导航栏（可选）
				this.totalHeight = this.statusBarHeight + (this.showNavBar ? this.navBarHeight : 0);
			}
		}
	};
</script>

<style scoped>
	.nav-bar-placeholder {
		width: 100%;
		background-color: transparent;
		overflow: hidden;
	}

	.status-bar,
	.nav-bar {
		background-color: transparent;
		width: 100%;

		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>